<?php
echo   "function drawChart() {";
// Create the data table.
echo   "var data = new google.visualization.DataTable();";
echo "data.addColumn('string', '$xAxis');";
echo "data.addColumn('number', '$yAxis');";
echo  "data.addRows(",$rowCount,");";

//echo "data.addRows([";
$i=0;
while ($row = mysqli_fetch_array($sql))
{
	//echo "[",$row[0],"], " ;
	echo "data.setCell(",$i,",0,'",$row[$dataX],"');";
	echo "data.setCell(",$i,",1,",$row[$dataY],");";
	$i++;
}

// Set chart options
/*
"data.setValue(0, 0, '2004');data.setValue(1, 0, '2005');"
400x300

'width':600,
 'height':400,
 'chartArea':{left:'50%', right:'50%'},
*/
echo  "var options = {'title':'$title graph for $char',
                     'is3D':true,
					 'width':600,
                     'height':400,
					 'backgroundColor': '#212320',
					 'backgroundColor.stroke':'#FFEECE',
                     'backgroundColor.strokeWidth':'5',
					 'fontName':'Helvetica',
					 'titleTextStyle': {color: '#FFEECE'},
                     'legendTextStyle': {color: '#FFEECE'},
					 'tooltipTextStyle': {color: '#212320'},
					 'hAxis': {title: '$xAxis',  titleTextStyle: {color: '#FFEECE'}, textStyle:  {color: '#FFEECE'}},
					 'vAxis': {title: '$yAxis', titleTextStyle: {color: '#FFEECE'}, textStyle:  {color: '#FFEECE'}},
					 'vAxis.maxValue': $yAxisMax,
					 'vAxis.minValue': $yAxisMin,
					 'vAxis.viewWindowMode': 'explicit',
					 'vAxis.viewWindow.min': 10,
                     };";

// Instantiate and draw our chart, passing in some options.
echo    "var chart = new google.visualization.LineChart(document.getElementById('chart_div'));";
echo    "chart.draw(data, options);";
echo    "}";
echo   "</script></head>";
//end html head

include 'wow.html';
// <!--Div that will hold the pie chart-->
echo "<div id='chart_div'></div>";

if ($page=='index.php')
{
$page = "$page?char=$char&realm=$realm";
}

echo "<a class='reg' href='$page'>Back</a>";

/*
One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options. If you specify the size in both locations, 
the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

There are advantages to specifying the size in one or the other place:

    Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.
    Specifying the size as a chart option - If the chart size is in the JavaScript, you can copy and paste, or serialize, save, and restore the JavaScript and have the chart resized consistently.
*/
?>
